<template>
  <div class="min-h-screen bg-primary-gradient">
    <!-- 页面头部 - 显示比赛数量 -->
    <div class="px-4 md:px-6 pt-6 md:pt-10 pb-4">
      <div class="max-w-7xl mx-auto">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-6">
          <!-- 左侧标题和说明 -->
          <div class="flex-1">
            <h1 class="text-xl md:text-2xl font-bold text-white mb-2">每日足球数据</h1>
            <div class="flex flex-col gap-2">
              <p class="text-sm md:text-base text-white/70">为足球爱好者提供足球比赛数据查询服务，每日前四场可免费查看</p>
              <!-- 添加颜色说明 -->
              <div
                class="w-fit flex items-start gap-2 text-xs text-white/60 bg-white/5 rounded-lg px-2 md:px-3 py-2 border border-white/10">
                <i class="i-carbon-information text-sm mt-0.5 text-blue-400 flex-shrink-0"></i>
                <div class="flex flex-wrap gap-x-2 md:gap-x-3 gap-y-1">
                  <span class="flex items-center gap-1 whitespace-nowrap">
                    <span class="w-2 h-2 rounded-full bg-yellow-500 flex-shrink-0"></span>
                    <span class="text-[11px] md:text-xs">黄色：胜负概率>{{ distancePercent }}%且待开赛</span>
                  </span>
                  <span class="flex items-center gap-1 whitespace-nowrap">
                    <span class="w-2 h-2 rounded-full bg-green-500 flex-shrink-0"></span>
                    <span class="text-[11px] md:text-xs">绿色：分析准确</span>
                  </span>
                  <div class="flex items-center gap-1 whitespace-nowrap">
                    <div class="star-icon w-4 h-4"></div>
                    <span class="text-[11px] md:text-xs">星星表示分析评级 ≥ {{ startShowRating }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 右侧日期选择和统计 -->
          <div class="w-full md:w-auto md:text-right">
            <div
              class="bg-white/10 backdrop-blur-sm rounded-lg px-3 md:px-4 py-2 md:py-3 border border-white/20 flex flex-col md:flex-row md:items-center gap-2 md:gap-0">
              <!-- 第一行：日期选择器和复选框 -->
              <div class="flex items-center justify-between md:justify-start gap-2">
                <!-- 日期选择器 -->
                <div class="date-picker-wrapper">
                  <el-date-picker v-model="selectedDate" type="date" placeholder="选择日期" format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD" @change="handleDateChange" :clearable="false"
                    :disabled-date="disabledDate" size="small" class="custom-date-picker" />
                </div>

                <!-- 筛选按钮组 -->
                <div class="flex items-center gap-2">
                  <!-- 添加：完整数据开关（仅今天显示） -->
                  <!-- <div v-if="isToday" class="flex items-center gap-2">
                    <el-checkbox v-model="showOnlyToday" label="只看当日" size="small"
                      class="custom-checkbox mobile-checkbox" />
                  </div> -->
                  <button v-if="isToday" @click="showOnlyToday = !showOnlyToday"
                    :class="{ 'active-filter': showOnlyToday }" class="filter-btn" title="只显示当日比赛">
                    <span class="text-xs">当日</span>
                  </button>
                  <button @click="filterStarOnly = !filterStarOnly" :class="{ 'active-filter': filterStarOnly }"
                    class="filter-btn" title="只显示高评分比赛">
                    <span class="text-xs">星标</span>
                  </button>
                  <button @click="filterHighProbDiff = !filterHighProbDiff"
                    :class="{ 'active-filter': filterHighProbDiff }" class="filter-btn"
                    title="只显示胜率相差>{{ distancePercent }}%的比赛">
                    <span class="text-xs">{{ distancePercent }}%</span>
                  </button>
                  <button @click="filterDrawOnly = !filterDrawOnly" :class="{ 'active-filter': filterDrawOnly }"
                    class="filter-btn" title="只显示平局概率最高的比赛">
                    <span class="text-xs">平局</span>
                  </button>
                </div>
              </div>

              <!-- 第二行：日期文本和比赛数量 -->
              <div class="flex items-center justify-between md:justify-start md:ml-4 gap-2">
                <div class="text-xs md:text-sm text-white/60">{{ selectedDateText }}</div>
                <div class="text-xl md:text-2xl font-bold text-yellow-400 w-8">{{ filteredMatchList.length }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 比赛列表 -->
    <div class="px-4 md:px-6 pb-20">
      <div class="max-w-7xl mx-auto">
        <!-- 加载状态 -->
        <div v-if="loading" class="flex justify-center items-center py-20">
          <div class="loading-spinner"></div>
          <span class="ml-4 text-white/70">正在加载比赛数据...</span>
        </div>

        <!-- 比赛卡片列表 -->
        <div v-else-if="filteredMatchList.length > 0"
          class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 gap-3">
          <div v-for="match in filteredMatchList" :key="match.matchId"
            class="card-hover cursor-pointer group p-5 relative" @click="goToMatchDetail(match)">
            <!-- 分析准确性标识 - 双斜杠样式 -->
            <div v-if="getPredictionAccuracy(match) !== null"
              class="absolute top-0 right-0 w-16 h-16 overflow-hidden z-10">
              <div class="double-slash" :class="{
                'double-slash-success': getPredictionAccuracy(match) === true,
                'double-slash-pending': getPredictionAccuracy(match) === 'pending',
              }"></div>
            </div>

            <!-- 高评分星星标识 -->
            <div v-if="isHighRating(match)" class="absolute top-2 right-2 z-20" title="高质量分析">
              <div class="star-icon"></div>
            </div>

            <div class="absolute top-2 left-2 z-20 flex items-center gap-1">
              <!-- 可查看/免费标签 - 移到比分标签上方 -->
              <div v-if="shouldShowViewableTag(match)"
                class="px-2 py-1 bg-gradient-to-r from-green-500 to-emerald-500 text-white text-9px font-bold rounded shadow-lg op-90">
                免费
              </div>
              <!-- 比分正确标签 -->
              <div v-if="isScoreCorrect(match)"
                class="px-2 py-1 bg-gradient-to-r from-blue-500 to-cyan-500 text-white text-9px font-bold rounded shadow-lg op-90">
                比分正确
              </div>
            </div>

            <!-- 顶部信息 -->
            <div class="flex items-center justify-between mb-2">
              <div class="flex items-center gap-1.5">
                <div class="w-1 h-1 bg-gradient-to-r from-yellow-500 to-orange-500 rounded-full"></div>
                <span class="text-xs font-medium text-white/80 truncate">{{ match.matchData.leagueName }} </span>
              </div>
              <div class="text-right flex text-xs">
                <div class="text-xs text-white/60 mr-2">{{ match.matchData.matchNum }}</div>
                <span class="text-white/60">{{ formatDate(match.matchData.matchTime) }}</span>
                <span class="text-xs text-white/60">-{{ formatTime(match.matchData.matchTime) }}</span>
              </div>
            </div>

            <!-- 队伍信息 -->
            <div class="w-full mb-3 mt-3 flex items-center justify-center">
              <!-- 主队 -->
              <div class="flex-1 text-3 flex items-center flex-col text-3.5">
                <div>{{ match.matchData.homeTeam.name }}</div>
                <div class="text-xs text-white/60">{{ match.matchData.homeTeam.rank || '-' }}</div>
              </div>

              <!-- VS -->
              <div class="text-center flex flex-col items-center">
                <template v-if="getHomeScore(match) && getAwayScore(match)">
                  <div class="flex items-center gap-2">
                    <div class="text-lg font-bold text-yellow-400">
                      <span class="text-xs text-white/40 mr-0.5">{{ getPenaltyScore(match, 'home') }}</span>
                      <span>{{ getHomeScore(match) }}</span>
                    </div>
                    <div class="text-white/40 text-xs font-medium">VS</div>
                    <div class="text-lg font-bold text-orange-400">
                      <span>{{ getAwayScore(match) }}</span>
                      <span class="text-xs text-white/40 ml-0.5">{{ getPenaltyScore(match, 'away') }}</span>
                    </div>
                  </div>
                  <div v-if="getHalfHomeScore(match) && getHalfAwayScore(match)" class="text-xs text-white/40 mt-0.5">
                    ({{ getHalfHomeScore(match) }}:{{ getHalfAwayScore(match) }})
                  </div>
                </template>
                <div v-else class="text-white/40 text-xs font-medium">VS</div>
              </div>

              <!-- 客队 -->
              <div class="flex-1 text-3 flex items-center flex-col text-3.5">
                <div>{{ match.matchData.awayTeam.name }}</div>
                <div class="text-xs text-white/60">{{ match.matchData.awayTeam.rank || '-' }}</div>
              </div>
            </div>

            <!-- 赔率信息 -->
            <div class="bg-white/5 rounded-lg p-2 mb-2 mt-4">
              <div class="grid grid-cols-3 gap-1">
                <div class="text-center">
                  <div class="text-xs text-white/60 mb-1">主胜</div>
                  <div class="text-xs font-bold" :class="getOddsColor(Number(match.matchData.odds.had.h))">
                    {{ match.matchData.odds.had.h || '-' }}
                  </div>
                </div>
                <div class="text-center">
                  <div class="text-xs text-white/60 mb-1">平局</div>
                  <div class="text-xs font-bold text-white">{{ match.matchData.odds.had.d || '-' }}</div>
                </div>
                <div class="text-center">
                  <div class="text-xs text-white/60 mb-1">客胜</div>
                  <div class="text-xs font-bold" :class="getOddsColor(Number(match.matchData.odds.had.a))">
                    {{ match.matchData.odds.had.a || '-' }}
                  </div>
                </div>
              </div>
            </div>

            <!-- 操作按钮 -->
            <div class="flex gap-1.5 mt-4">
              <button class="flex-1 btn-primary text-xs py-1.5 cursor-pointer">查看分析</button>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-else class="text-center py-20">
          <div class="w-24 h-24 bg-white/10 rounded-full flex items-center justify-center mx-auto mb-6">
            <i class="i-carbon-football text-4xl text-white/40"></i>
          </div>
          <h3 class="text-xl font-semibold text-white mb-2">暂无比赛数据</h3>
          <p class="text-white/60 mb-6">{{ selectedDateText }}暂时没有足球比赛，请稍后再来查看</p>
          <button @click="refreshData" class="btn-primary">刷新数据</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElDatePicker, ElCheckbox } from 'element-plus';
import { ref, onMounted, computed, watch } from 'vue';
import { getTodayFootballList, MatchStatus } from '~/apis/football';
import type { MatchItem } from '~/apis/football';
import { storeToRefs } from 'pinia';
import { useUserStore } from '~/stores/user';

// 路由相关
const route = useRoute();
const router = useRouter();

// 获取用户信息
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);

// 获取配置
const runtimeConfig = useRuntimeConfig();
const distancePercent = runtimeConfig.public.distancePercent;
const startShowRating = runtimeConfig.public.startShowRating;

// SEO配置
useSEO({
  title: '每日足球数据 - 球球助手',
  description: '提供足球比赛数据查询服务，展示比赛信息、球队数据等，仅供学习参考',
  keywords: '足球数据,比赛查询,球队信息,数据展示,球球助手',
});

// 响应式数据
const loading = ref(true);
const matchList = ref<MatchItem[]>([]);
const selectedDate = ref<string>('');

// 添加：完整数据展示开关
const showOnlyToday = ref(false);

// 添加：筛选状态
const filterStarOnly = ref(false);
const filterHighProbDiff = ref(false);
const filterDrawOnly = ref(false);

// 添加：判断是否为今天
const isToday = computed(() => {
  if (!selectedDate.value) return true;

  const date = new Date(selectedDate.value);
  const today = new Date();

  const selectedDateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
  const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());

  return selectedDateOnly.getTime() === todayOnly.getTime();
});

// 计算属性：格式化选中的日期显示文本
const selectedDateText = computed(() => {
  if (!selectedDate.value) return '今日比赛';

  const date = new Date(selectedDate.value);
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);
  const tomorrow = new Date(today);
  tomorrow.setDate(tomorrow.getDate() + 1);

  // 重置时间部分进行比较
  const selectedDateOnly = new Date(date.getFullYear(), date.getMonth(), date.getDate());
  const todayOnly = new Date(today.getFullYear(), today.getMonth(), today.getDate());
  const yesterdayOnly = new Date(yesterday.getFullYear(), yesterday.getMonth(), yesterday.getDate());
  const tomorrowOnly = new Date(tomorrow.getFullYear(), tomorrow.getMonth(), tomorrow.getDate());

  if (selectedDateOnly.getTime() === todayOnly.getTime()) {
    return '今日比赛';
  } else if (selectedDateOnly.getTime() === yesterdayOnly.getTime()) {
    return '昨日比赛';
  } else if (selectedDateOnly.getTime() === tomorrowOnly.getTime()) {
    return '明日比赛';
  } else {
    return `${date.getMonth() + 1}月${date.getDate()}日比赛`;
  }
});

// 让球大小
const getHandicapSize = (match: MatchItem) => {
  if (!match.matchData?.odds?.hhad?.goalLine) return 0;
  const goalLine = match.matchData?.odds?.hhad?.goalLine;
  const goalLineStr = String(goalLine).trim();
  const handicap = parseFloat(goalLineStr);
  return handicap;
};

// 判断是否为平局概率最高的比赛
const isDrawHighest = (match: MatchItem) => {
  if (!match.MatchAnalysis || match.MatchAnalysis.length === 0) return false;
  const lastAnalysis = match.MatchAnalysis[match.MatchAnalysis.length - 1];
  const probabilities = lastAnalysis.analysisData.probabilities;
  if (!probabilities?.home_win || !probabilities?.draw || !probabilities?.away_win) return false;

  // 解析概率字符串
  const parseProb = (probStr: string) => parseFloat(String(probStr)?.replace('%', ''));
  const homeWinProb = parseProb(probabilities?.home_win);
  const drawProb = parseProb(probabilities?.draw);
  const awayWinProb = parseProb(probabilities?.away_win);

  // 判断平局概率是否为最高
  return drawProb >= homeWinProb && drawProb >= awayWinProb;
};

// 计算属性：过滤后的比赛列表
const filteredMatchList = computed(() => {
  let result = matchList.value;

  // 筛选星标比赛
  if (filterStarOnly.value) {
    result = result.filter((match) => isHighRating(match));
  }

  // 筛选胜率相差10%的比赛
  if (filterHighProbDiff.value) {
    result = result.filter((match) => getPredictionAccuracy(match, false) !== null);
  }

  // 筛选平局概率最高的比赛
  if (filterDrawOnly.value) {
    result = result.filter((match) => isDrawHighest(match));
  }

  return result;
});

// 禁用未来日期（可选，根据业务需求调整）
const disabledDate = (time: Date) => {
  const today = new Date();
  today.setHours(23, 59, 59, 999);
  return time.getTime() > today.getTime();
};

// 获取比赛列表的函数
const fetchMatchData = async (date?: string) => {
  try {
    loading.value = true;
    // 添加 onlyToday 参数：当是今天且 showOnlyToday 为 true 时传递
    const params: { date?: string; onlyToday?: boolean } = { date };
    if (isToday.value && showOnlyToday.value) {
      params.onlyToday = true;
    }
    const matchData = await getTodayFootballList(params);

    if (matchData?.data) {
      matchList.value = matchData.data;
    } else {
      matchList.value = [];
    }
  } catch (error) {
    console.error('获取比赛数据失败:', error);
    matchList.value = [];
  } finally {
    loading.value = false;
  }
};

// 处理日期变化
const handleDateChange = (date: string) => {
  if (date) {
    // 更新 URL query
    router.push({
      query: {
        date,
      },
    });
    fetchMatchData(date);
  } else {
    // 如果清空日期，移除 query 并获取今日比赛
    router.push({
      query: {},
    });
    selectedDate.value = '';
    fetchMatchData();
  }
};

// 刷新数据
const refreshData = async () => {
  await fetchMatchData(selectedDate.value || undefined);
};

// 跳转到比赛详情
const goToMatchDetail = (match: MatchItem) => {
  navigateTo(`/football-detail?matchId=${match.matchId}`);
};

// 格式化时间
const formatTime = (timeStr: string) => {
  const date = new Date(timeStr);
  return date.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false,
  });
};

// 格式化日期
const formatDate = (timeStr: string) => {
  const date = new Date(timeStr);
  return date.toLocaleDateString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
  });
};

// 根据赔率值获取颜色类
const getOddsColor = (odds: number) => {
  if (odds < 1) {
    return 'text-gray-300'; // 小于1淡色
  } else if (odds >= 1 && odds < 2) {
    return 'text-green-400'; // 1-2之间绿色
  } else if (odds >= 2 && odds < 3) {
    return 'text-orange-400'; // 2-3之间橙色
  } else {
    return 'text-red-400'; // 3之后统一红色
  }
};

// 判断比分是否正确（是否在预测的比分列表中）
const isScoreCorrect = (match: MatchItem) => {
  // 如果没有实际比分，返回false
  const homeScore = getHomeScore(match);
  const awayScore = getAwayScore(match);
  if (!homeScore || !awayScore) return false;

  // 如果没有分析数据，返回false
  if (!match.MatchAnalysis || match.MatchAnalysis.length === 0) return false;
  const lastAnalysis = match.MatchAnalysis[match.MatchAnalysis.length - 1];
  const scorelines = lastAnalysis.analysisData.most_likely_scorelines;
  if (!scorelines || scorelines.length === 0) return false;

  // 格式化实际比分为 "主-客" 格式（例如 "2-1"）
  const actualScore = `${homeScore}-${awayScore}`;

  // 检查实际比分是否在预测比分列表中
  return scorelines.some((predictedScore: string) => {
    // 处理可能的格式差异（"-" 或 ":"）
    const normalizedPredicted = predictedScore.trim().replace(/:/g, '-');
    return normalizedPredicted === actualScore;
  });
};

// 获取分析准确性
const getPredictionAccuracy = (match: MatchItem, unContainEnded: boolean = true) => {
  // 如果没有分析数据，返回null
  if (!match.MatchAnalysis || match.MatchAnalysis.length === 0) return null;

  // 比分正确
  if (isScoreCorrect(match)) return true;

  // 获取最后一项分析
  const lastAnalysis = match.MatchAnalysis[match.MatchAnalysis.length - 1];
  const probabilities = lastAnalysis.analysisData.probabilities;
  if (!probabilities?.home_win || !probabilities?.draw || !probabilities?.away_win) return null;

  // 解析概率字符串
  const parseProb = (probStr: string) => parseFloat(String(probStr)?.replace('%', ''));
  const homeWinProb = parseProb(probabilities?.home_win);
  const drawProb = parseProb(probabilities?.draw);
  const awayWinProb = parseProb(probabilities?.away_win);

  // 找出概率最高的分析结果
  const maxProb = Math.max(homeWinProb, drawProb, awayWinProb);

  // 平局概率-主客最大值>=差距概率+比赛未开始
  if (maxProb === drawProb && Math.abs(drawProb - Math.max(homeWinProb, awayWinProb)) >= distancePercent && match.status === MatchStatus.NOT_STARTED) return 'pending';

  // 判断胜负关系差距，显示颜色(如果比赛已经结束，则不按差距判断)
  const judgeEnded = unContainEnded && match.status !== MatchStatus.NOT_STARTED;
  if (Math.abs(homeWinProb - awayWinProb) < distancePercent && !judgeEnded) return null;

  // 如果比赛未开始，返回'pending'显示黄色
  if (match.status === MatchStatus.NOT_STARTED) return 'pending';

  // 预测胜负情况
  switch (maxProb) {
    // 预测主胜
    case homeWinProb:
      if (match.status === MatchStatus.WINNING) return true;
      else if (match.status === MatchStatus.DRAW && getHandicapSize(match) > 0) return true;
      break;
    // 预测平局
    case drawProb:
      if (match.status === MatchStatus.DRAW) return true;
      break;
    // 预测客胜
    case awayWinProb:
      if (match.status === MatchStatus.LOSING) return true;
      else if (match.status === MatchStatus.DRAW && getHandicapSize(match) < 0) return true;
      break;
    default:
      return false;
  }
  return false;
};

// 判断是否为高质量分析（评级 >= 8）
const isHighRating = (match: MatchItem) => {
  if (!match.MatchAnalysis || match.MatchAnalysis.length === 0) return false;
  const lastAnalysis = match.MatchAnalysis[match.MatchAnalysis.length - 1];
  const rating = lastAnalysis.analysisData.rating;
  return +rating >= startShowRating;
};

// 判断是否显示"可查看"标签
const shouldShowViewableTag = (match: MatchItem) => {
  // 非VIP用户 且 有分析数据
  return userInfo.value?.role !== 'VIP' && match.MatchAnalysis && match.MatchAnalysis.length > 0;
};

// 获取点球比分
const getPenaltyScore = (match: MatchItem, homeAway: 'home' | 'away') => {
  if (!match.penaltyScore) return '';
  const scores = match.penaltyScore.split(':');
  return `[${homeAway === 'home' ? scores[0]?.trim() : scores[1]?.trim()}]`;
};

// 获取全场比分 - 主队
const getHomeScore = (match: MatchItem) => {
  if (!match.fullScore) return null;
  const scores = match.fullScore.split(':');
  return scores[0]?.trim();
};

// 获取全场比分 - 客队
const getAwayScore = (match: MatchItem) => {
  if (!match.fullScore) return null;
  const scores = match.fullScore.split(':');
  return scores[1]?.trim();
};

// 获取半场比分 - 主队
const getHalfHomeScore = (match: MatchItem) => {
  if (!match.hadScore) return null;
  const scores = match.hadScore.split(':');
  return scores[0]?.trim();
};

// 获取半场比分 - 客队
const getHalfAwayScore = (match: MatchItem) => {
  if (!match.hadScore) return null;
  const scores = match.hadScore.split(':');
  return scores[1]?.trim();
};

// 添加：处理完整数据开关变化
const handleFullDataChange = (value: boolean) => {
  // 保存到 localStorage
  if (process.client) {
    localStorage.setItem('football-show-full-data', JSON.stringify(value));
  }
  // 重新获取数据
  fetchMatchData(selectedDate.value || undefined);
};

// 生命周期
onMounted(async () => {
  // 添加：从 localStorage 读取完整数据开关状态
  if (import.meta.client) {
    const savedFullData = localStorage.getItem('football-show-full-data');
    if (savedFullData !== null) {
      showOnlyToday.value = JSON.parse(savedFullData);
    }
  }

  const today = new Date();
  const todayStr = today.toISOString().split('T')[0];

  // 检查 URL query 是否有日期参数
  const queryDate = route.query.date as string;

  if (queryDate) {
    // 验证日期格式并检查是否大于今日
    const selectedDateObj = new Date(queryDate);
    const todayObj = new Date(todayStr);

    // 如果日期有效且不大于今日，使用该日期
    if (!isNaN(selectedDateObj.getTime()) && selectedDateObj <= todayObj) {
      selectedDate.value = queryDate;
      await fetchMatchData(queryDate);
    } else {
      // 如果日期大于今日或无效，使用今日
      selectedDate.value = todayStr;
      // 更新 URL query 为今日
      router.replace({
        query: {
          date: todayStr,
        },
      });
      await fetchMatchData(todayStr);
    }
  } else {
    // 无 query 参数，使用今日
    selectedDate.value = todayStr;
    await fetchMatchData(todayStr);
  }

  // 在 watch 或直接监听
  watch(showOnlyToday, (newValue) => {
    handleFullDataChange(newValue);
  });
});
</script>

<style scoped>
/* 双斜杠状态标识 */
.double-slash {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotate(-45deg);
  transform-origin: top right;
}

.double-slash::before,
.double-slash::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 60px;
  top: -30px;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.double-slash::before {
  right: 28px;
}

.double-slash::after {
  right: 14px;
}

.double-slash-success::before,
.double-slash-success::after {
  background: linear-gradient(180deg, #10b981, #059669);
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.double-slash-fail::before,
.double-slash-fail::after {
  background: linear-gradient(180deg, #ef4444, #dc2626);
  box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.double-slash-pending::before,
.double-slash-pending::after {
  background: linear-gradient(180deg, #eab308, #f59e0b);
  box-shadow: 0 0 10px rgba(234, 179, 8, 0.5);
}

/* 日期选择器样式定制 */
.date-picker-wrapper {
  position: relative;
}

:deep(.custom-date-picker) {
  width: 140px;
}

:deep(.custom-date-picker .el-input__wrapper) {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 0.5rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(20px) !important;
  transition: all 0.3s ease !important;
}

:deep(.custom-date-picker .el-input__wrapper:hover) {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(234, 179, 8, 0.5) !important;
  box-shadow: 0 10px 30px rgba(234, 179, 8, 0.3) !important;
}

:deep(.custom-date-picker .el-input__inner) {
  color: white !important;
  background: transparent !important;
  border: none !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

:deep(.custom-date-picker .el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5) !important;
}

:deep(.custom-date-picker .el-input__suffix) {
  color: rgba(255, 255, 255, 0.6) !important;
}

:deep(.custom-date-picker .el-input__suffix:hover) {
  color: #eab308 !important;
}

/* 日期选择器弹窗样式 */
:deep(.el-picker-panel) {
  background: rgba(15, 23, 42, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 1rem !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8) !important;
  backdrop-filter: blur(20px) !important;
}

:deep(.el-picker-panel__content) {
  color: white !important;
}

:deep(.el-date-picker__header) {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

:deep(.el-date-picker__header button) {
  color: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-date-picker__header button:hover) {
  color: #eab308 !important;
  background: rgba(234, 179, 8, 0.1) !important;
}

:deep(.el-picker-panel__icon-btn) {
  color: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-picker-panel__icon-btn:hover) {
  color: #eab308 !important;
}

:deep(.el-date-table th) {
  color: rgba(255, 255, 255, 0.6) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-date-table td) {
  color: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-date-table td.available:hover) {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #eab308 !important;
}

:deep(.el-date-table td.current:not(.disabled)) {
  background: linear-gradient(90deg, #eab308, #f97316) !important;
  color: white !important;
  border-radius: 0.5rem !important;
}

:deep(.el-date-table td.today) {
  color: #eab308 !important;
  font-weight: 600 !important;
}

:deep(.el-date-table td.disabled) {
  color: rgba(255, 255, 255, 0.3) !important;
}

:deep(.el-date-table td.prev-month),
:deep(.el-date-table td.next-month) {
  color: rgba(255, 255, 255, 0.4) !important;
}

/* 月份选择器样式 */
:deep(.el-month-table td) {
  color: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-month-table td.available:hover) {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #eab308 !important;
}

:deep(.el-month-table td.current:not(.disabled)) {
  background: linear-gradient(90deg, #eab308, #f97316) !important;
  color: white !important;
  border-radius: 0.5rem !important;
}

/* 年份选择器样式 */
:deep(.el-year-table td) {
  color: rgba(255, 255, 255, 0.8) !important;
}

:deep(.el-year-table td.available:hover) {
  background: rgba(234, 179, 8, 0.2) !important;
  color: #eab308 !important;
}

:deep(.el-year-table td.current:not(.disabled)) {
  background: linear-gradient(90deg, #eab308, #f97316) !important;
  color: white !important;
  border-radius: 0.5rem !important;
}

/* Checkbox 样式定制 */
:deep(.custom-checkbox) {
  --el-checkbox-checked-bg-color: #eab308;
  --el-checkbox-checked-border-color: #eab308;
  --el-checkbox-input-border-color-hover: #eab308;
}

:deep(.custom-checkbox .el-checkbox__label) {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

:deep(.custom-checkbox .el-checkbox__input .el-checkbox__inner) {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

:deep(.custom-checkbox .el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #eab308 !important;
  border-color: #eab308 !important;
}

:deep(.custom-checkbox:hover .el-checkbox__inner) {
  border-color: #eab308 !important;
}

/* 星星图标 */
.star-icon {
  position: relative;
  width: 20px;
  height: 20px;
}

.star-icon::before {
  content: '★';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  color: #eab308;
  text-shadow:
    0 0 5px rgba(234, 179, 8, 0.8),
    0 0 10px rgba(234, 179, 8, 0.6),
    0 0 15px rgba(234, 179, 8, 0.4);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* 筛选按钮样式 */
.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(234, 179, 8, 0.5);
  color: #eab308;
}

.filter-btn.active-filter {
  background: linear-gradient(90deg, #eab308, #f97316);
  border-color: #eab308;
  color: white;
  box-shadow: 0 0 15px rgba(234, 179, 8, 0.5);
}

.star-icon-small {
  position: relative;
  width: 14px;
  height: 14px;
}

.star-icon-small::before {
  content: '★';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: currentColor;
}

.active-filter .star-icon-small::before {
  text-shadow:
    0 0 3px rgba(255, 255, 255, 0.8),
    0 0 6px rgba(255, 255, 255, 0.6);
}
</style>
